<Div class=bot-foot>

CSS "Always on the bottom" Footer

CSS "Always on the bottom" Footer cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

HTML CSS JavaScript Behavior

HTML Preprocessor

About HTML Preprocessors

HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.

Learn more · Versions

NoneHamlMarkdownSlimPug

Stuff for <head>

About the <head>

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. If you need things in the <head> of the document, put that code here.

Insecure Resource

The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.

↑ Insert the most common viewport meta tag

CSS Preprocessor

About CSS Preprocessors

CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.

Learn more · Versions

NoneLESSSCSSSassStylusPostCSS

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

About External Resources

You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.

If the stylesheet you link to has the file extension of a preprocessor, we'll attempt to process it before applying.

You can also link to another Pen here, and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

Quick-add: ---Bootstrap 4Bootstrap 3FoundationAnimate.cssMaterializeBulma + add another resource

JavaScript Preprocessor

About JavaScript Preprocessors

JavaScript preprocessors can help make authoring JavaScript easier and more convenient. For instance, CoffeeScript can help prevent easy-to-make mistakes and offer a cleaner syntax and Babel can bring ECMAScript 6 features to browsers that only support ECMAScript 5.

Learn more · Versions

NoneCoffeeScriptLiveScriptTypeScriptBabel

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

About External Resources

You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.

If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.

You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

Quick-add: ---AngularBackboneBootstrap 3Bootstrap 4D3EmberFoundationGreenSock TweenMaxHandlebarsjQueryjQuery UILodashModernizrPolyfill.ioPolymerReactReact DOMSnap.svgThree.jsUnderscoreVueZeptoZingChart + add another resource

<div> <h2>CSS “Always on the bottom” Footer</h2> <p>I often find myself designing a website where the footer must rest at the bottom of the page, even if the content above it is too short to push it to the bottom of the viewport naturally.</p> <p>However, if the content is taller than the user’s viewport, then the footer should disappear from view as it would normally, resting at the bottom of the page (not fixed to the viewport).</p> <p>If you know the height of the footer, then you should set it explicitly, and set the bottom padding of the footer’s parent element to be the same value (or larger if you want some spacing).</p> <p>This is to prevent the footer from overlapping the content above it, since it is being removed from the document flow with <code>position: absolute;</code>.</p> </div> <div>This footer will always be positioned at the bottom of the page, but <strong>not fixed</strong>.</div>

/** * Demo Styles */ html { height: 100%; box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } body { position: relative; margin: 0; padding-bottom: 6rem; min-height: 100%; font-family: "Helvetica Neue", Arial, sans-serif; } .demo { margin: 0 auto; padding-top: 64px; max-width: 640px; width: 94%; } .demo h2 { margin-top: 0; } /** * Footer Styles */ .footer { position: absolute; right: 0; bottom: 0; left: 0; padding: 1rem; background-color: #efefef; text-align: center; }

Loading ..................

Editor Commands

Ctrl Ctrl Space Autocomplete (if available)

F Find

G Find Next

⇧G Find Previous

Alt F Opt F Find & Replace

[ Indent Code Right

] Indent Code Left

⇧ Tab Auto Indent Code

/ Line Comment

⇧ Opt / Block Comment

Also see: Tab Triggers

HTML Specific

⇧A Wrap With...

Misc

⇧5 Re-run Preview

⇧8 Clear All Analyze Errors

⇧9 Open This Dialog

Pen Actions

P Create New Pen

S Save

I Info Panel (if owned)

CodePen requires JavaScript to render the code and preview areas in this view.

Trying viewing this Pen in Debug Mode, which is the preview area without any iframe and does not require JavaScript. Although what the preview is of might!

Need to know how to enable JavaScript? Go here.

Close this, use anyway.

codepen.io

rehub/index.php at master · yuriyQQ/rehub · GitHub

<? include_once "header.html" ?> <body> <header> <div> <div> <div> <a href="/"> <div></div> <div> Первый Московский государственный медицинский университет имени И.М. Сеченова </div> </a> <a> <div>+7(495)123-45-67</div> <div>Обратный звонок</div> </a> <a> <div>Улица Большая Пироговская 9, стр1</div> <div>Режим работы круглосуточно</div> </a> </div> <div> <nav> <a>Услуги</a> <a>О центре</a> <a href="team.php">Специалисты</a> <a>Реабилитация</a> <a>Программы</a> <a>Обучение</a> <a href="news.php">Новости</a> <a>Санаторий</a> <a href="contacts.php">Контакты</a> </nav> <a>Записаться на прием</a> </div> </div> </div> </header> <section> <div> <div> <div> <h2>Центр реабилитации</h2> <div>При первом медицинском институте им И.М. Сеченова</div> <p>Центр Медицинской Реабилитации - это многопрофильный центр, площадью 4500 кв. м, обладающий широкими возможностями в востановлении утраченного здоровья. В Центра применяются методики восстановительного лечения, апробированные в реабилитационных клиниках Израиля и Нидерландов, Германии и Греции.</p> <a>Услуги центра</a> </div> <div> <a> <div></div> Нейрореабилитация <div></div> </a> <a> <div></div> Реабилитация опорно-двигательного аппарата <div></div> </a> <a> <div></div> Реабилитация тазового дна <div></div> </a> <a> <div></div> Спортивная реабилитация <div></div> </a> <a> <div></div> Кардиореабилитация <div></div> </a> </div> </div> </div> </section> <section> <div> <div> <div> <table> <tr> <th ><h3>Новости центра</h3></th> <th > <div>30.01.2017</div> <div>Реабилитация опорно-двигательного аппарата</div> <div> Восстановительное лечение болезни суставов и позвоночника </div> </th> <th > <div>30.01.2017</div> <div>Реабилитация опорно-двигательного аппарата</div> <div> Восстановительное лечение болезни суставов и позвоночника </div> </th> <th > <div>30.01.2017</div> <div>Реабилитация опорно-двигательного аппарата</div> <div> Восстановительное лечение болезни суставов и позвоночника </div> </th> </tr> </table> </div> </div> </div> </section> <section> <div> <div> <h3>Услуги приемного отделения</h3> <p> При обращении в центр реабилитации им И.М. Сеченова пациентам оказывается высококвалифицированная медицинская помощь по любой профильной патологии. </p> <div> <table> <tr> <th >Консультация врачей</th> <th > <div>Консультация варча высшей категории</div> <div>1650 <span>P</span></div> </th> <th > <div>Консультация варча высшей категории</div> <div>1650 <span>P</span></div> </th> <th > <div>Консультация варча высшей категории</div> <div>1650 <span>P</span></div> </th> <th > <div>Консультация варча высшей категории</div> <div>1650 <span>P</span></div> </th> <th > <div>Консультация варча высшей категории</div> <div>1650 <span>P</span></div> </th> <th > <a>Подробнее</a> </th> </tr> <tr> <th >Клинико-диагностический центр</th> <th > <div>Консультация варча высшей категории</div> <div>1650 <span>P</span></div> </th> <th > <div>Консультация варча высшей категории</div> <div>1650 <span>P</span></div> </th> <th > <div>Консультация варча высшей категории</div> <div>1650 <span>P</span></div> </th> <th > <div>Консультация варча высшей категории</div> <div>1650 <span>P</span></div> </th> <th > <div>Консультация варча высшей категории</div> <div>1650 <span>P</span></div> </th> <th > <a>Подробнее</a> </th> </tr> <tr> <th >Центр крови</th> <th > <div>Консультация варча высшей категории</div> <div>1650 <span>P</span></div> </th> <th > <div>Консультация варча высшей категории</div> <div>1650 <span>P</span></div> </th> <th > <div>Консультация варча высшей категории</div> <div>1650 <span>P</span></div> </th> <th > <div>Консультация варча высшей категории</div> <div>1650 <span>P</span></div> </th> <th > <div>Консультация варча высшей категории</div> <div>1650 <span>P</span></div> </th> <th > <a>Подробнее</a> </th> </tr> </table> </div> </div> </div> </section> <section> <div> <div> <div> <div> <h3>Ведущие специалисты</h3> <p> Квалификация и многолетний опыт в совокупности с современными лабораторно-диагностическими исследованиями позволяют вовремя выявить патологии, поставить точный диагноз и назначить соответсвующую терапию </p> <a>Все специалисты</a> </div> <div> <a> <div>Терновой Константин Сергеевич</div> <div>Заведующий отделением, кандидат наук</div> </a> <a> <div>Терновой Константин Сергеевич</div> <div>Заведующий отделением, кандидат наук</div> </a> <a> <div>Терновой Константин Сергеевич</div> <div>Заведующий отделением, кандидат наук</div> </a> <a> <div>Терновой Константин Сергеевич</div> <div>Заведующий отделением, кандидат наук</div> </a> </div> </div> </div> </div> </section> <section> <div> <div> <div> <div><h3>Отзывы пациентов</h3></div> <div> <div>Спасибо, что помогли вернуться к жизни!</div> <p>Теперь могу продолжить любимое дело, за что благодарен ему.</p> <div>Виталий Викторович <a> <div></div> </a> </div> </div> </div> </div> </div> </section> <footer> <div> <div> <div> <div> <a href="/"> <div></div> <div> Первый МГМУ </br> им И.М. Сеченова </div> </a> <a> <span>@2017 travma.moscow.ru</span> <p>Официальный сайт клиники травматологии, ортопедии и патологии суставов Первого МГМУ им И.М. Сеченова</p> </a> <div> <a> <div>+7(495)123-45-67</div> <div>Обратный звонок</div> </a> <a> <div>Улица Большая Пироговская 9, стр1</div> <div>Режим работы круглосуточно</div> </a> </div> </div> <div> <div> <a>Услуги</a> <a>О центре</a> <a>Специалисты</a> <a>Реабилитация</a> <a>Программы</a> <a>Обучение</a> <a>Новости</a> <a>Санаторий</a> <a>Контакты</a> </div> <a>Записаться на прием</a> <a>Карта сайта</a> </div> <div> <div> <a>Нейрореабилитация</a> <a>Реабилитация опорно-двигательного аппарата</a> <a>Реабилитация тазового дна</a> <a>Спортивная реабилитация</a> <a>Кардиореабилитация</a> </div> <a> <div></div> <div>Дизайн и разработка сайта Cтудия <span>itillect.com</span></div> </a> </div> </div> </div> </div> </footer> <script type="text/javascript" src="/assets/js/jquery-2.1.4.min.js" ></script> <script type="text/javascript" src="/assets/js/main.js" ></script> </body> </html>

github.com

Форма. Основы bootstrap 3 для начинающих. Урок №14

Всем привет!В сегодняшнем уроке вы научитесь создавать формы в bootstrap 3.В конце урока вы сможете самостоятельно создавать различные формы для вашей веб-страницы, например, форму обратной связи, регистрации на сайте, форму входа в админ зону, форму поиска и т.д. А самое главное это то, что все эти формы адаптивные под мобильные устройства.Все, пора приступать к изучению форм на Bootstrap 3.

Все виды форм для веб-страницы я описывать не буду, так как все это вы сможете найти в статье «HTML формы». В Bootstrap 3 все формы создаются идентично HTML, разница лишь в том, что в бутстрапе есть готовые CSS стили, которые помогут быстро и красиво визуально оформить формы и сделать их адаптивными.

Простой пример формы

Вот так выглядит код простой формы.

<form> <div> <label for="exampleInputEmail">Email</label> <input type="email" placeholder="Ваш email"> </div> <div> <label for="exampleInputPassword">Пароль</label> <input type="password" placeholder="Password"> </div> <div> <label> <input type="checkbox"> Я не бот </label> </div> <button type="submit">Отправить</button> </form>

В форме используем класс «form-group» для интервала между другими полями форм:

Класс «form-control» - задает ширину для поля 100% (поле адаптивное), закругление углов, отступы внутри поля.

placeholder – подсказка для пользователя, которая будет отображаться прямо внутри формы поля (раньше использовали атрибут value)

placeholder="Ваш email">

Схема:

В результате вы увидите вот такую форму:

Горизонтальная форма

Чтобы выровнять каждое поле с текстом по горизонтали, добавляем для тега <form> класс «form-horizontal», для тега <label> добавить класс «form-control». Класс «col-xs-2», «col-xs-10» и «col-xs-offset-2» это размер (читайте тут):

<form> <div> <label for="inputEmail">Адрес email:</label> <div> <input type="email" placeholder="Введите email"> </div> </div> <div> <label for="inputPassword">Пароль:</label> <div> <input type="password" placeholder="Введите пароль"> </div> </div> <div> <div> <div> <label><input type="checkbox"> Запомнить</label> </div> </div> </div> <div> <div> <button type="submit">Войти</button> </div> </div> </form>

Схема:

Результат:

Форма в одну строку

Чтобы расположить элементы формы в одну строку, необходимо добавить Bootstrap класс «form-inline» к тегу <form>.

Результат:

Или вот так:

<form> <div> <input type="email" placeholder="Ваш email"> </div> <div> <input type="password" placeholder="Password"> </div> <div> <label> <input type="checkbox"> Я не бот </label> </div> <button type="submit">Отправить</button> </form>

Удалил строки :

<label for="exampleInputEmail">Email</label> <label for="exampleInputPassword">Пароль</label>

Результат:

Создание статических элементов управления формы

Если вам нужно разместить в горизонтальной форме обычный текст рядом с элементом <label>, то используйте класс «form-control-static» для тега <p>:

<form> <div> <label for="inputEmail">Email</label> <div> <p>[email protected]</p> </div> </div> <div> <label for="inputPassword">Пароль</label> <div> <input type="password" placeholder="Пароль"> </div> </div> <div> <div> <div> <label><input type="checkbox"> Запомнить</label> </div> </div> </div> <div> <div> <button type="submit">Войти</button> </div> </div> </form>

Результат:

Изменение высоты полей формы

Чтобы задать высоту полей формы, в Bootstrap есть класс «input-lg» и «input-sm» для тегов <input> и <select>.

Результат:

Изменение ширины полей формы

Ширину полей можно менять используя сетку Bootstrap. Я думаю, вы в курсе, что такое сетка в Bootstrap. Если нет, тогда вам стоит почитать статью «Сетка в Bootstrap 3»:

<form> <div> <div> <input type="text"> </div> <div> <input type="text"> </div> </div> <br /> <div> <div> <textarea></textarea> </div> <div> <textarea></textarea> </div> </div> <br /> <div> <div> <select> <option>Выбор</option> </select> </div> <div> <select> <option>Выбор</option> </select> </div> </div> </form>

Результат:

Иконки или знаки в поле формы.

Можно форму приукрасить, добавив, например, иконку или текст перед или после элемента <input> .Текст или иконка размещается между тегом <span> с классом «input-group-addon». Контейнер <span> с классом «input-group-addon» можно размещать перед или после тега <input>

Контейнер <span> с классом «input-group-addon» нужно разместить внутри контейнера <div> с классом «input-group»:

Это иконки Bootstrap. Все иконки можете найти тут.

Результат:

Радиопереключатель или флажек в поле формы

Можно разместить в форму флажек или радеопереключатель:

Результат:

Кнопка в поле формыТакже можно поместить кнопку перед или после поля формы. Кнопки нужно разместить внутри контейнера <span> с классом «input-group-btn»:

<form> <div> <div> <div> <span> <button type="button">Вперед!</button> </span> <input type="text"> </div> </div> <div> <div> <input type="text"> <span> <button type="button">Вперед!</button> </span> </div> </div> </div> </form>

Результат:

Кнопка с выпадающим меню в поле формы

Также можно создать кнопку с выпадающим меню:

<form> <div> <div> <div> <div> <button type="button" data-toggle="dropdown"> Действие <span></span> </button> <ul> <li><a href="#">Действие</a></li> <li><a href="#">Другое действие</a></li> <li></li> <li><a href="#">Отдельная ссылка</a></li> </ul> </div> <input type="text"> </div> </div> <div> <div> <input type="text"> <div> <button type="button" data-toggle="dropdown"> Действие <span></span> </button> <ul> <li><a href="#">Действие</a></li> <li><a href="#">Другое действие</a></li> <li></li> <li><a href="#">Отдельная ссылка</a></li> </ul> </div> </div> </div> </div> </form>

Результат:

Группы кнопок, поделенных на сегменты

<form> <div> <div> <div> <div> <button tabindex="-1" type="button">ОК</button> <button tabindex="-1" data-toggle="dropdown" type="button"> <span></span> <span>Toggle Dropdown</span> </button> <ul> <li><a href="#">Действие</a></li> <li><a href="#">Другое действие</a></li> <li></li> <li><a href="#">Отдельная сслыка</a></li> </ul> </div> <input type="text"> </div> </div> <div> <div> <input type="text"> <div> <button tabindex="-1" type="button">ОК</button> <button tabindex="-1" data-toggle="dropdown" type="button"> <span></span> <span>Toggle Dropdown</span> </button> <ul> <li><a href="#">Действие</a></li> <li><a href="#">Другое действие</a></li> <li></li> <li><a href="#">Отдельная ссылка</a></li> </ul> </div> </div> </div> </div> </form>

Результат:

Неактивное поле формы

Если вам нужно создать форму, где будет неактивное поле, добавьте атрибут «disabled» к полю <input>:

Результат:

Поле формы только для чтения

Также можно создать поле формы только для чтения. Поле будет не активным для изменения. Добавьте атрибут «readonly» для тега <input>:

Результат:

Поясняющий текст

Чтобы создать поясняющий текст под полем, добавьте после тега <input> тег <span> с классом «help-block»:

<form> <input type="text"> <span>Блок справочного текста будет расположенный на новой строке.</span> </form>

Результат:

Стили состояний полей формы для проверки заполнения

Если вам нужно сообщить об ошибках или уведомлениях об успешном выполнении действий, в Bootstrap есть готовые стили для оформления. Чтобы воспользоваться стилями, добавьте один из классов «has-warning», «has-error» или «has-success» к элементу «form-group».

Значение классов «has-warning», «has-error» или «has-success»:

has-success / Успешный вводhas-warning / Ввод с предупреждениемhas-error / Ввод с оcшибкой

Пример:

<form> <div> <label for="inputSuccess1">Успешный ввод</label> <input type="text"> </div> <div> <label for="inputWarning1">Ввод с предупреждением</label> <input type="text"> </div> <div> <label for="inputError1">Ввод с ошибкой</label> <input type="text"> </div> </form>

Результат:

А можно еще больше расширить возможности для состояний полей, добавив к полям соответствующие иконки.Добавьте класс «has-feedback» к «form-group» и класс «form-control-feedback» к соответствующей иконке glyphicon:

<form> <div> <label for="inputSuccess2">Успешный ввод</label> <input type="text"> <span></span> </div> <div> <label for="inputWarning2">Ввод с предупреждением</label> <input type="text"> <span></span> </div> <div> <label for="inputError2">Ввод с ошибкой</label> <input type="text"> <span></span> </div> </form>

На все иконки glyphicon я давал ссылку выше, либо поищите у меня на блоге.

Результат:

Вроде, все сказал. Теперь в подарок от блогера Степана форма на Bootstrap :

<h3>Анкета работника завода</h3> <form> <div> <label for="lastName">Фамилия:</label> <div> <input type="text" placeholder="Введите фамилию"> </div> </div> <div> <label for="firstName">Имя:</label> <div> <input type="text" placeholder="Введите имя"> </div> </div> <div> <label for="fatherName">Отчество:</label> <div> <input type="text" placeholder="Введите отчество"> </div> </div> <div> <label>Дата рождения:</label> <div> <input type="date"> </div> </div> <div> <label for="inputEmail">Email:</label> <div> <input type="email" placeholder="Email"> </div> </div> <div> <label for="phoneNumber">Телефон:</label> <div> <input type="tel" placeholder="Введите номер телефона"> </div> </div> <div> <label for="postalAddress">Адрес:</label> <div> <textarea rows="3" placeholder="Введите адрес"></textarea> </div> </div> <div> <label>Пол:</label> <div> <label> <input type="radio" name="genderRadios" value="male"> Мужской </label> </div> <div> <label> <input type="radio" name="genderRadios" value="female"> Женский </label> </div> </div> <div> <div> <label> <input type="checkbox" value="agree"> Я согласен с <a href="#">условиями</a>. </label> </div> </div> <br /> <div> <div> <input type="submit" value="Регистрация"> <input type="reset" value="Очистить форму"> </div> </div> </form>

Результат:

Анкета работника завода

Всем спасибо! Жду вас на следующих уроках.

Предыдущая запись Таблицы. Основы bootstrap 3 для начинающих. Урок №13 Следующая запись Изображение. Основы bootstrap 3 для начинающих. Урок №15

stepkinblog.ru

Bootstrap Footer – creating simple and sticky footer in Bootstrap

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap footer example</title>

</head>

<body>

<div>

<h2>A Basic Footer website</h2>

<div>

<div>

<ul>

<li>

<a href="#" data-toggle="dropdown">Products <b></b></a>

<ul>

<li><a href="#">Product 1</a></li>

<li><a href="#">Product 2</a></li>

<li><a href="#">Product 3</a></li>

<li><a href="#">Product 4</a></li>

<li><a href="#">Product 5</a></li>

</ul>

</li>

<li><a href="#">Services</a></li>

<li><a href="#">About</a></li>

<li><a href="#">Contact</a></li>

</ul>

<div>

</div>

</form>

</div>

</div>

</nav>

<ol>

</ol>

<div>

<div>

<h2>CSS Tutorial</h2>

<p><button>Go to CSS Tutorial</p>

</div>

<div>

<div>

<h2>Write less Do More</h2>

<p><button>Go to jQuery tutorial</p>

</div>

<div>

<div>

<h2>Java Tutorial</h2>

<p><button>Go to Java Tutorial</p>

</div>

</a>

</a>

</div>

<hr />

<div>

<h3>Example Heading!</h3>

<p></p>

<p>Example Text Here for features, product or service etc! Example Text Here for features, product or service etc Example Text Here for features, product or service etc Example Text Here for features, product or service etc Example Text Here for features, product or service etc</p>

</div>

<div>

<h3>Example Heading</h3>

</div>

<div>

<h3>Existing Users</h3>

<div>

<label for="inputEmail3">Email</label>

<div>

</div>

<div>

<label for="inputPassword3">Password</label>

<div>

</div>

<div>

<label>

<input type="checkbox"> Remember me

</label>

</div>

<div>

</div>

</form>

</div>

<div>

<ul>

<li><a href="#">Overview</a></li>

<li><a href="">Nav item again</a></li>

<li><a href="">Another nav item</a></li>

<li><a href="">More navigation</a></li>

</ul>

</div>

<hr />

<div>

</div>

</body>

</html>

www.tutorialscollection.com

Пользовательский интерфейс на базе Twitter Bootstrap для начинающих / Хабрахабр

В статье я попробую рассказать о том, как на базе Twitter Bootstrap можно очень легко реализовать приятный пользовательский интерфейс небольшого (одностраничного) web-приложения, владея лишь базовыми знаниями html. Сразу предупреждаю, специалистам будет не интересно, речь пойдет о базовом стандартном функционале. В свободное время в качестве хобби разрабатываю одностраничный агрегатор интересных заголовков новостных лент. В какой-то момент базовый функционал прототипа оказался готов, не хватало отметки только напротив задачи «Дизайн». Получить красивый пользовательский интерфейс, не владея магией дизайнера (есть только базовые знания paint) и программиста (есть только базовые знания html и css). Страница состоит из следующих элементов

Название
Форма отправки ссылки на новость
Форма отправки уникального кода читателя на e-mail
Форма ввода уникального кода читателя
Список новостей с группировкой по дате (дата, время, заголовок-ссылка, количество переходов, новость может быть прочитанной или новой)
Ссылка на rss
Ссылка на chrome extension
идентификатор релиза
e-mail обратной связи

После нескольких дней расслабленного поиска готового шаблона (css template) пришел к выводу, что это не путь настоящего джедая, т.к. все что проходило эстетический фильтр, застревало в фильтре техническом (см. постановка задачи, сложный код я просто не мог адаптировать под свои нужны). И вот, почти случайно, я попал в рай. Не буду подробно описывать Bootstrap, детали вы можете посмотреть перейдя по ссылке, перечислю основные элементы, для которых имеются готовые стили (иногда по несколько):

Стандартные элементы форматирования html
Списки
Фрагменты кода
Таблицы
Формы
Кнопки
Элементы навигации
Табы
Разбивка на страницы
Миниатюры
Информационные сообщения
Прогресс-бары

На мой взгляд, это очень круто. Все что нужно для оформления прототипа. Далее я расскажу, как использовал элементы 1,4,5 и 7 из списка.

Итак, шаг 1. Подключаем Bootstrap

Скачиваем и распаковываем архив с Bootstrap в корневую папку нашего сайта, подключаем css:<head> ... <link href="/bootstrap/css/bootstrap.css" rel="stylesheet"> <link href="/bootstrap/css/bootstrap-responsive.css" rel="stylesheet"> ... </head> Вторая стока нужна для автоматической адаптации интерфейса под поддерживаемые Bootstrap устройства

Шаг 2. Оформляем «мясо».

Под «мясом» я понимаю список новостей. Самым простым способом это можно сделать таблицей с отключенными рамками. Первая колонка — дата (только один раз для группы), вторая колонка — время, третья — заголовок и количество переходов. Все это, согласно правилам Bootstrap нужно упаковать в контейнер:<body> <div> <table> <tbody> <tr> <td>{Дата}</td> <td>{Время}</td> <td><a href="{Ссылка}">{Заголовок}</a> ({Количество переходов})</td> </tr> </tbody> </table> </div> </body> Для прочитанных новостей указываем особый класс:<a href="{Ссылка}">{Заголовок}</a>

Шаг 3. Форма отправки ссылки на новость.

Тут опять все просто, Bootstrap предоставляет несколько готовых стилей форм: обычная форма, форма одной строкой, форма поиска… Нам нужна вторая, допиливаем ее в наш контейнер перед таблицей: <div> <form method="post"> <input type="text" placeholder="Ссылка на новость" name="new_link"> <button type="submit">Добавить</button> </form> ... </div> class=«span10» — Bootstrap предполагает построение интерфейса на базе сетки из 12 колонок, наши элементы можно выравнивать по ней. Научным методом проб и ошибок я пришел к ширине поля для ввода равного 10.

Шаг 4,5,6. Шапка.

Мои представления о том, как должен выглядеть удобный сайт предполагают минималистический стиль: все ненужное спрятано, все что не удалось спрятать — бледное. Формы прячем в выпадающее меню, ссылки на rss и chrome extension делаем бледными. Все это упаковываем в заголовок, который приклеиваем к верхней части сайта (class=«navbar navbar-fixed-top»):<body> <div> <div> <div> <a href="">***</a> <ul> <li><a href="{Ссылка}">rss</a></li> <li><a href="{Ссылка}">chrome extension</a></li> </ul> <ul> <li> <a href="#" data-toggle="dropdown">Ваш уникальный код читателя <strong>{Код}</strong><b></b></a> <ul> <li><a data-toggle="modal" href="#email">Отправить на e-mail</a></li> <li><a data-toggle="modal" href="#new_uid">Ввести другой код</a></li> </ul> </li> </ul> </div> </div> </div> ... </body> Сами формы: ... <form method="post"> <div> <div> <a data-dismiss="modal">×</a> <h4>Отправить уникальный код на e-mail</h4> </div> <div> <input type="text" placeholder="e-mail" name="email"> <p>Позволяет синхронизировать прочитанные на разных компьютерах новости.</p> </div> <div> <button type="submit" data-dismiss="modal">Отменить</button> <button type="submit">Отправить</button> </div> </div> </form> <form method="post"> <div> <div> <a data-dismiss="modal">×</a> <h4>Ввести уникальный код читателя</h4> </div> <div> <input type="text" placeholder="Уникальный код" name="new_uid"> <p>Позволяет синхронизировать прочитанные на разных компьютерах новости.</p> </div> <div> <button type="submit" data-dismiss="modal">Отменить</button> <button type="submit">Отправить</button> </div> </div> </form>

Важный момент. Что бы это заработало, нужно подключить пару скриптов:

Шаг 7. Футер.

Дописываем основной контейнер: <div> ... <hr> <p>релиз 2012/02/19 23:49 *****</p> </div>

Twitter Bootstrap позволил без особых усилий и знаний, не написав ни строчки css и не сильно ломая html-код, получить очень симпатичный интерфейс прототипа, который не стыдно показать людям. Если интересно, в следующей статье я расскажу, как без глубоких знаний PHP+MySQL (имея только базовые навыки программирования) реализовать функционал, позволяющий показать вашу идею на миллион долларов не просто на бумаге, а в виде работающего прототипа. Спасибо за внимание!UPD: Не хочется топик в «Я пиарюсь» убирать, убрал все лишние ссылки

habrahabr.ru